<script>
import MButton from '@/components/MButton'
import {Checkbox, CheckboxGroup} from '@/components/checkbox/index.js'
import {Radio} from '@/components/radio/index.js'

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'hello world',
      id: 'testId',
      items: [{name: 'syys', age: 20}, {name: 'guagua', age: 18}],
      checked: true,
      checkeds: [1, 2, 3],
      testStyle: {
        background: 'red',
        color: '#fff'
      },
      // test radio
      radio: 2,
      radioId: 1
    }
  },
  // components: {MButton},
  render(h) {
    let lis = this.items.map(item => {
      return (
        <li
          id={item.name}
          data-name={item.name}
          data-age={item.age}
          onClick={this.itemClickHandler}
        >
          {item.name}:{item.age}
        </li>
      )
    })

    return (
      <div>
        <span style={this.testStyle}>{this.msg}</span>
        <MButton
          identity={this.id}
          text={this.msg}
          nativeOnClick={this.nativeClickHandler}
          onClick={this.clickHandler}
        />
        <ul onClick={event => this.itemsClickHandler(event, this.items)}>
          {lis}
        </ul>
        <CheckboxGroup
          value={this.checkeds}
          onInput={value => (this.checkeds = value)}
        >
          <Checkbox value={1} label="备选项1" />
        </CheckboxGroup>

        <Checkbox
          value={this.checked}
          onInput={value => (this.checked = value)}
          label="备选项4"
        />
        <br/>
        <Radio
          value={this.radio}
          identify={1}
          onInput={value => (this.radio = value)}
          label="单选1"
        />
         <Radio
          value={this.radio}
          identify={2}
          onInput={value => (this.radio = value)}
          label="单选2"
        />
        <Radio
          value={this.radio}
          identify={3}
          disabled={true}
          onInput={value => (this.radio = value)}
        >单选3</Radio>
      </div>
    )
  },
  created() {},
  methods: {
    nativeClickHandler() {
      console.log('native on')
    },
    clickHandler() {
      console.log('click handler')
    },
    itemClickHandler(event) {
      event.stopPropagation()
      console.log('click item and stopPropagation')
    },
    itemsClickHandler(event, items) {
      event.stopPropagation()
      console.log(event, items)
    }
  }
}
</script>
